@import "./Scss/MenuItemTopStyle";
@import "./Scss/ImagesAndTexts";
@import "./Scss/OptionsButton";
@import "./Scss/OptionsSelect";
@import "./Scss/UChartsArcBar";
@import "./Scss/UChartsRing";
@import "./Scss/UChartsBar";
@import "./Scss/UChartsGauge";
@import "./Scss/SupervisoryControl";
@import "./Scss/DroneVideo";
@import "./Scss/VideoList";
@import "./Scss/Mars3d";
@import "./Scss/AutodeskAps";
@import "./Scss/LiveBroadcast";

.WeChatMenuItem {
	width: 100%;
	height: 750px;
	display: flex;
	align-items: center;
	justify-content: baseline;

	& > div {
		height: 100%;

		&.Preview {
			width: 375px;
			height: 750px;
			margin-right: 16px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;

			& > .WeChat {
				width: 100%;
				flex: 1;
				margin-bottom: 16px;
				background: #f9f9f9;
				border-radius: 8px;
				position: relative;
				box-shadow: 0px -2px 4px 0px rgba(38, 38, 38, 0.4);
				overflow-y: scroll;

				&::-webkit-scrollbar {
					display: none;
				}

				& > .WeChatTabs {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 40px;

					& > div {
						height: 100%;
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 12px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #ffffff;
						line-height: 17px;
						cursor: pointer;

						&.active {
							background: #f9f9f9;
							font-size: 12px;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #444444;
							line-height: 17px;
							border-radius: 4px 4px 0 0;
						}
					}
				}

				& > .WeChatModuleList {
					padding: 0 15px;
					display: grid;
					grid-template-columns: repeat(1, 1fr);
					margin-bottom: 16px;
					position: relative;
					z-index: 2;
				}
			}

			& > .Submit {
				width: 80%;
				border-radius: 50px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: hsl(0, 0%, var(--hsl));
				font-size: 24px;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				cursor: pointer;
			}
		}

		&.dispose {
			flex: 1;
			height: 100%;

			.ant-collapse-header {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.ant-collapse-header-text {
					font-size: 24px;
					font-family: YouSheBiaoTiHei;
				}
			}

			.ant-collapse-content-box {
				.entry {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8px;

					& > div:first-child {
						width: 150px;
						font-size: 16px;
						font-family: MicrosoftYaHeiSemibold;
						color: #444444;
						line-height: 20px;
						height: 20px;
						margin-right: 16px;
						text-align: right;
					}

					& > div:last-child,
					& > input:last-child,
					& > textarea:last-child {
						flex: 1;
					}
				}

				& > div {
					max-height: 530px;
					overflow-y: scroll;
					overflow-x: hidden;

					&.TabsSetUp {
						width: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: center;

						& > div {
							height: 100%;
							min-height: 530px;

							&.List {
								width: 100%;
								margin-right: 16px;

								& > .Add {
									margin: 0 16px;
									width: 150px;
									height: 30px;
									display: flex;
									align-items: center;
									justify-content: center;
									color: hsl(0, 0%, var(--hsl));
									font-size: 20px;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									border-radius: 50px;
									cursor: pointer;
								}

								& > .ListItem {
									width: 100%;
									padding-top: 16px;

									&::-webkit-scrollbar {
										display: none;
									}

									& > .ant-card {
										margin-bottom: 8px;

										.ant-card-body {
											padding: 16px;
										}
									}
								}
							}

							&.Page {
								width: 375px;
								height: 530px;
								overflow-y: scroll;
								background: rgba(0, 0, 0, 0.05);
								margin: 0 16px;

								.layout {
									width: 100%;
									min-height: 500px;

									.react-grid-item > .react-resizable-handle {
										z-index: 99;
									}

									.ModuleItemBox {
										&:hover {
											& > .ModuleItemBoxOptions {
												left: 0;
											}
										}

										position: relative;
										overflow: hidden;

										& > .ModuleItemBoxOptions {
											position: absolute;
											left: 100%;
											top: 0;
											width: 100%;
											height: 100%;
											background: rgba(0, 0, 0, 0.85);
											z-index: 2;
											transition: all 0.35s;
											display: flex;
											align-items: center;
											justify-content: center;
											flex-direction: column;

											& > div {
												position: relative;
												cursor: pointer;
												display: flex;
												align-items: center;
												justify-content: center;
												width: 100px;
												padding: 8px 16px;
												margin-bottom: 24px;
												color: #fff;
												transition: 0.5s;
												letter-spacing: 4px;
												overflow: hidden;
												z-index: 9;

												&:hover {
													background: var(--color);
													color: hsl(0, 0%, var(--hsl));
													box-shadow: 0 0 5px var(--color),
														0 0 25px var(--color), 0 0 50px var(--color),
														0 0 200px var(--color);
													-webkit-box-reflect: below 1px
														linear-gradient(transparent, #0005);
												}

												& > span {
													position: absolute;
													display: block;

													&:nth-child(1) {
														top: 0;
														left: 0;
														width: 100%;
														height: 2px;
														background: linear-gradient(
															90deg,
															transparent,
															var(--color)
														);
														animation: animate1 1s linear infinite;
													}

													&:nth-child(2) {
														top: -100%;
														right: 0;
														width: 2px;
														height: 100%;
														background: linear-gradient(
															180deg,
															transparent,
															var(--color)
														);
														animation: animate2 1s linear infinite;
														animation-delay: 0.25s;
													}

													&:nth-child(3) {
														bottom: 0;
														right: 0;
														width: 100%;
														height: 2px;
														background: linear-gradient(
															270deg,
															transparent,
															var(--color)
														);
														animation: animate3 1s linear infinite;
														animation-delay: 0.5s;
													}

													&:nth-child(4) {
														bottom: -100%;
														left: 0;
														width: 2px;
														height: 100%;
														background: linear-gradient(
															360deg,
															transparent,
															var(--color)
														);
														animation: animate4 1s linear infinite;
														animation-delay: 0.75s;
													}
												}

												@keyframes animate1 {
													0% {
														left: -100%;
													}

													50%,
													100% {
														left: 100%;
													}
												}

												@keyframes animate2 {
													0% {
														top: -100%;
													}

													50%,
													100% {
														top: 100%;
													}
												}

												@keyframes animate3 {
													0% {
														right: -100%;
													}

													50%,
													100% {
														right: 100%;
													}
												}

												@keyframes animate4 {
													0% {
														bottom: -100%;
													}

													50%,
													100% {
														bottom: 100%;
													}
												}
											}
										}
									}
								}
							}

							&.Modal {
								width: 375px;
								height: 530px;
								overflow-y: scroll;
								background: rgba(0, 0, 0, 0.05);
								margin: 0 16px;
								padding: 0 8px;

								.ModuleTitle {
									line-height: 30px;
									font-size: 16px;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									margin: 4px 0;
								}
							}
						}
					}
				}
			}
		}
	}
}
